<template>
  <view class="index">
	  <!-- 顶部搜索框 -->
	  	<view class="top-seiz">
			 <ugo-search></ugo-search>
		</view>

		<!-- 轮播图 -->
		<view>
			    <!--   轮播图的高度 = 原图片的高 * 轮播图的宽度 /   原图片的宽度 -->
			    <!--               =  340 * 750rpx /  750  -->
				<!--               = 340rpx -->
		   <u-swiper
            :list="swiperList"
			circular
			indicator
			keyName="image_src"
			height='340rpx'
           > 
		   </u-swiper>
		</view>

		<!-- 导航模块 -->
		<view class="navs">
			<navigator v-for="value in navs" :key="value.naem">
				<u--image mode="widthFix" :src="value.image_src" width='100%'></u--image>
			</navigator>
		</view>


		<!-- 楼层 -->
		<view class="floor">
			<view class="floor-group" v-for="value in floorList" :key="value.floor_title.name" >
				<!-- 标题 -->
				<view class="floor-group-title">
					<u--image width="100%"  mode="widthFix"  :src='value.floor_title.image_src'></u--image>
				</view>
				
				<!-- 内容 -->
				<view class="floor-group-content">
					<navigator v-for="(value2,index2) in value.product_list" :key="value2.name">
						<u--image  v-if="index2===0" :src='value2.image_src' width="100%" mode="widthFix">
						</u--image>

						<u--image  v-else :src='value2.image_src' width="100%" height="188rpx" mode="scaleToFill">
						</u--image>
					</navigator>
				</view>
			</view>
		</view>
  </view>
</template>

<script>
export default {
data () {
	return {
		// 轮播图数组
		swiperList:[],
		// 导航数组
		navs:[],
	    // 楼层数组
      floorList: [],
	}
 },

   onLoad(){
	
		// 导航数组
		// let [err1,res1] =await uni.request({
		// 	url:"https://api-hmugo-web.itheima.net/api/public/v1/home/catitems"
		// })
		// // console.log(res1);
		// this.navs=res1.data.message


		// // 楼层
		// let [err2,res2] = await uni.request({
		// 	url:"https://api-hmugo-web.itheima.net/api/public/v1/home/floordata"
		// })
		// console.log(res2);
		// this.floorList = res2.data.message

		// 调用请求函数
		Promise.all([this.getswiperList(),this.getnavs(),this.getfloorList()])

	},
	methods: {
	   //  轮播图
	async getswiperList(){
		// 解构的同时 重命名 message 被改为 swiperList
	  let {message:swiperList} = await uni.$u.http.get('/home/swiperdata')
	  this.swiperList = swiperList
		},

		// 导航数组
	async	getnavs(){
	  let {message:navs} = await uni.$u.http.get('/home/catitems')
	  this.navs = navs

		},

		// 楼层
	async	getfloorList(){
	  let {message:floorList} = await uni.$u.http.get('/home/floordata')
	  this.floorList = floorList
		}
	}
}
</script>

<style lang="scss">
.top-seiz{
	background-color: #e64644;
	padding: 10px;
}
.navs{
	display: flex;
	navigator{
		flex: 1;
		padding: 20rpx;
	}
}
.floor {
  .floor-group-content {
    // 清除浮动
    overflow: hidden;
    navigator {
      width: 232rpx;
      margin-left: 15rpx;
      float: left;

      /* 
      几张图片的大小不一致 无法直接使用图片高度自适应的设置 
      得要靠自己去计算图片的高度
      1 第一张图片的高度 当时可以使用高度自适应。。
      2 后四张图片的高度，手动去计算，高度等于第一张图片高度的一半即可！！ 
      
       */

      /* 后四个导航标签 */
      // &:nth-last-child(-n + 4) {
      //   image {
      //     height: 188rpx;
      //   }
      // }

      &:nth-last-child(-n + 2) {
        // 后两个导航标签
        margin-top: 15rpx;
      }
    }
  }
}
</style>